<template>
    <div>
        <HeaderNav />

        <div style="max-width:1200px;margin:auto;">
            <!--路径-->
            <div class="box">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>商品列表</el-breadcrumb-item>
                </el-breadcrumb>
            </div>

            <!--分类-->
            <div class="box">
                <el-row>
                    <el-col :span="3"  class="bg">
                        <span>分类</span>
                    </el-col>
                    <el-col :span="21">

                        <div>
                            <span class="item-brand" v-for="(item,index) in categoryData" :key="index" @click="eventCategory(item.childrens)">{{ item.name }}</span>                          
                        </div>
                        <div style="margin-top:15px;padding-left:20px;">
                            <span class="item-brand" v-for="(item,index) in categoryChildrens" @click="eventCategorySearch(item.id)" :key="index">{{item.name}}</span>
                        </div>

                    </el-col>
                </el-row>
            </div>

            <!--品牌-->
            <div class="box">
                <el-row>
                    <el-col :span="3"  class="bg">
                        <span>品牌</span>
                    </el-col>
                    <el-col :span="21">
                        <span class="item-brand" v-for="(item,index) in brandData" 
                        @click="eventBrand(item.id)" :key="index" >{{item.name}}</span>                        
                    </el-col>
                </el-row>

            </div>

            <!--价格-->
            <div class="box">
                <el-row>
                    <el-col :span="3" class="bg">
                        <span>价格</span>
                    </el-col>
                    <el-col :span="21">
                        <span class="item-brand">0-100</span>
                        <span class="item-brand">100-500</span>
                        <span class="item-brand">500-1000</span>
                        <span class="item-brand">
                            <el-input size="mini" style="width:50px;" />-
                            <el-input size="mini" style="width:50px;" /><el-button  size="mini">查询</el-button>
                        </span>
                    </el-col>
                </el-row>
            </div>

            <!--排序-->
            <div class="box">
                <el-button size="mini" @click="eventSort('name')">按名称</el-button>
                <el-button size="mini" @click="eventSort('date')">按日期</el-button>
            </div>

            <!--商品列表显示-->
            <div class="box">
                <el-row :gutter="20">
                    <el-col :span="6" v-for="(o, index) in productData" :key="index" style="margin-bottom:20px;">
                        
                        <el-card :body-style="{ padding: '0px' }" @click.native="goToDetail(o)">
                            <img :src="o.coverImagePath" class="image" style="width:180px;">
                            <div style="padding: 14px;">
                                <span>{{o.name}}</span>
                                <span style="color:red;margin-left:30px; font-weight: 600;font-size: 16px;">￥{{ o.sku.salePrice }}</span>
                                <div class="bottom clearfix">
                                    <el-button size="mini" type="danger" class="button">立即购买</el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!--分页-->
            <div class="box">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pages.pageIndex" :page-sizes="[4,8,16,20]" :page-size="pages.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="pages.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>

//引入这个组件文件
import HeaderNav from '@/components/HeaderNav.vue'
export default {
    data() {
        return {
            //品牌的所有数据
            brandData: [
                {id:1,name:'品牌1',logo:'1.jpg'},
                {id:2,name:'品牌2',logo:'2.jpg'},
                {id:3,name:'品牌3',logo:'3.jpg'},
                {id:4,name:'品牌4',logo:'4.jpg'},
                {id:5,name:'品牌5',logo:'5.jpg'},
            ],
            //分类的所有数据
            categoryData:[
                {id:1,name:'上海物联网',childrens:[
                    {id:110,name:'物联网2010A'},
                    {id:111,name:'物联网2009A'},
                    {id:112,name:'物联网2011A'},
                    {id:113,name:'物联网2012A'},
                ]},
                {id:2,name:'上海大数据',childrens:[
                    {id:210,name:'大数据2010A'},
                    {id:211,name:'大数据2011A'},
                ] }
            ],
            //分类的子集数据
            categoryChildrens:[],
            //所有符合条件的数据
            productData:[],
            //分页相关的属性
            pages:{
                pageIndex:1,
                pageSize:4,
                total:0
            },
            search:{
                brandId:'',
                categoryId:'',
                sortName:'',
                sortValue:'desc'
            }
        }
    },
    //要告诉页面，这个引入的组件文件，是一个组件 
    components: {
        //将这个组件在页面中，当作标签来使用即可
        HeaderNav
    }, 
    mounted(){
        //this.pages.total = this.productData.length
        this.onLoadData()
    },
    methods: {
        //卡片跳转事件
        goToDetail(o){
            //this.$message.info('你点我了')
            //this.$router.push('/product/detail?id=1223567878676434356786453')
            //this.$router.push({ name:'product/detail',params: { spuid:'1',name:'acb' } })
            this.$router.push({ path:'/product/detail',query:{spuid:o.spuid,skuid:o.sku.id,categoryid:o.categoryId} })
        },
        //排序按钮
        eventSort(sortName){
            this.search.sortName = sortName

            if(this.search.sortValue == 'desc'){
                this.search.sortValue = 'asc'
            }else{
                this.search.sortValue = 'desc'
            }

            this.onLoadData()
        },        
        //二级分类的查询事件
        eventCategorySearch(id){
            this.search.categoryId = id
            this.onLoadData()
        },
        //品牌单击事件
        eventBrand(id){
            this.search.brandId = id
            this.onLoadData()
        },
        //页面加载时，获取数据
        onLoadData(){
            let url='http://localhost:5162/product'
            this.$http.get(url,{params:{
                pageIndex:this.pages.pageIndex,
                pagesize:this.pages.pageSize,
                categoryId:this.search.categoryId,
                brandId:this.search.brandId,
                sortName:this.search.sortName,
                sortValue:this.search.sortValue
            }}).then(res=>{
                //console.log(res)
                this.brandData = res.data.data.brands
                this.categoryData = res.data.data.categories
                this.productData = res.data.data.products
                this.pages.total = res.data.data.total
                console.log(this.productData)        
            })
            .catch(error=>{
                //console.log(error)
                if(error.code=="ERR_NETWORK"){
                    this.$message.error('网络连接异常，请检查看重试！')
                }
            })
        },
        //一级分类的单击事件
        eventCategory(value){
            //单击任何一个一级分类，显示它对应的二级
            //单击一级分类，把它对应的子级数据，给到这个控制二级显示的变量即可
            this.categoryChildrens = value
        },
        handleSizeChange(val) {
            this.pages.pageSize = val
            this.onLoadData()
        },
        handleCurrentChange(val) {
            this.pages.pageIndex = val
            this.onLoadData()
        }
    },
}
</script>

<style scoped>


.bg{
    
    background: #eee;
}

.item-brand {
    margin: 0 20px;
    cursor: pointer;
}
</style>